<template>
    <div class="container-fluid ">
        <TopBar></TopBar>
        <div class="box-bg">
            <div class="box-1">
                
                <div class="ai-btn">
                    <br>
                <br><br>
                    <div class="d-grid gap-2 col-2 mx-auto ">
                        <button type="button" @click="goToAi()" style="width: 300px;" class="btn btn-primary">{{ $t('learnPage.ai') }}</button>
                    </div>
                    <br><br>
                </div>
                
            </div>
            <div>
                <div class="box-2">
                    <img  src="../assets/study/1.png" alt="..."  @click="getArticlesList('单片机','')">
                    <img  src="../assets/study/2.png" alt="..."  @click="getArticlesList('后端','')">
                    <img  src="../assets/study/3.png" alt="..."  @click="getArticlesList('前端','')">
                </div>
                <div class="box-3">
                    <img  src="../assets/study/4.png" alt="..."  @click="getArticlesList('网络安全','')">
                    <img  src="../assets/study/5.png" alt="..."  @click="getArticlesList('其他','')">
                </div>
            </div>
            <div class="bar">
                <div class="line-tile">
                    <p>{{getArticlesForm.tags}}</p>
                </div>

                <div class="search-box">

              
                <br>
                <form class="d-flex" role="search">
                    <span style="margin:auto ;color: yellow; text-align: center;margin-right:30px">{{ $t('learnPage.allNum') }}{{articleStore.articleList.list.length}}</span>
                    <input class="form-control me-2" v-model="getArticlesForm.key_words" type="search" :placeholder="$t('learnPage.searchSome')" aria-label="Search">
                    <button class="btn btn-primary" type="submit"  @click="getArticlesList(getArticlesForm.tags,getArticlesForm.key_words)">
                        <img style="width:24px;height:24px" src="../assets/icons/search.svg" alt="PASSLINK" />
                    </button>
                </form>
            </div>
            </div>
            <!-- 容器 -->
            <div class="article-box">
                <TransitionGroup name="article_list" tag="div">
                    <div v-for="article in articleStore.articleList.list" :key="article.article_id">
                        <div @click="goArticleDetails(article)">
                            <Article :article="article"></Article>
                        </div>
                       
                    </div>
                </TransitionGroup>
            </div>
            <!-- 分页-->
            <br>
            <br>
            <br>
          
           <!-- 分页-->
           <div  v-show="page_navigation_show" class="pagination-box">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item" @click="getArticlesPage(getArticlesForm.page_now-1)">
                        <a class="page-link"  aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item" v-for="page_index in  page_counts ">
                        <a class="page-link" @click="getArticlesPage(page_index)">{{page_index}}</a>
                    </li>
                    <li class="page-item" @click="getArticlesPage(getArticlesForm.page_now+1)">
                        <a class="page-link"  aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        </div>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup lang="ts">
import {GetListRequestData} from '../api/article/types'
import { ArticleStore } from '../store/articelStore/index'
import {ref,reactive,onMounted,watch} from "vue"
import { useRouter } from 'vue-router'
import toast from "../components/Toast/index"


const router = useRouter() 
const articleStore = ArticleStore()
const page_counts = ref(0)
const page_navigation_show = ref(false)

//获取列表表单参数
const getArticlesForm:GetListRequestData = reactive({
    page_now: 1,
    page_size: 15,
    type: "",
    tags: "",
    key_words: ""
})
//监控页数

watch(()=>articleStore.articleList,()=>{
    if(articleStore.articleList.page_all_num > getArticlesForm.page_size){
         page_navigation_show.value = true;
         page_counts.value = Math.ceil(articleStore.articleList.page_all_num/getArticlesForm.page_size)
         console.log("页面总数"+ page_counts.value)
        
    }
})

function goToAi(){
    //跳转
    router.push({
        path: 'ai'
    })
}
//文章详情页面
function goArticleDetails(article:any) {
  //直接存储，方便取
  articleStore.article_now = article
  //跳转
    router.push({
        path: 'articleDetails'
    })
}


//通过分页获取文章
function getArticlesPage(page_index:number){
    if(getArticlesForm.page_now === page_index){
        return
    }
    getArticlesForm.page_now = page_index
    if(page_index < 1 ){
        getArticlesForm.page_now = 1
        toast.showToast({msg:"已经是第一页了",type:"warning"})
        return
    }
    if(page_index > page_counts.value){
        getArticlesForm.page_now = page_counts.value
        toast.showToast({msg:"已经是最后一页了",type:"warning"})
        return
    }

    articleStore.getArticles(getArticlesForm)
    console.log("page_index : " + page_index)
    console.log("page_now : " +  getArticlesForm.page_now)
 
}
//获取文章通过标签
async function getArticlesList(tags:string,key_words:string){
    if(key_words.length>20){
        toast.showToast({msg:"搜索最大字段仅限20以内",type:"error",mask:false})
        return
    }

    getArticlesForm.key_words = key_words
    getArticlesForm.tags = tags
   await articleStore.getArticles(getArticlesForm);

   if(articleStore.articleList.page_all_num > getArticlesForm.page_size){
        page_navigation_show.value = true;
    }
}

 //获取文章列表
getArticlesList("其他","");
onMounted(() => {
   
    
})

</script>
<style lang="scss" scoped>
@media screen and (max-width: $passlink-media-max-width-5) {
    .search-box{
        display: none;
    }
    .ai-btn{
        display: none;
    }
    
  }

.container-fluid {
    background-color: $passlink-bg-color;

    .box-bg {
        padding: 10px;
        width: 100%;
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;

        .box-1 {
            width: 100%;
            margin: auto;
        }

        .box-2 {
            margin-top: 30px;
            display: flex;
            justify-content: space-around;

            img {
                width: 30%;
                height: auto;
            }
        }

        .box-3 {
            margin-top: 30px;
            display: flex;
            justify-content: space-around;

            img {
                width: 30%;
                height: auto;
            }
        }

        .bar {
            .line-tile {
                width: 100%;
                border-bottom: 2px solid $passlink-font-color-white;

                p {
                    color: $passlink-font-color-yellow;
                    text-align: center;
                    margin: auto;
                    font-weight: bold;
                    font-size: $passlink-font-size24;
                }
            }

            width: 100%;
            margin-top: 20px;
            margin-bottom: 30px;
            justify-content: flex-end;

            input {
                width: 300px;
            }
        }

        .article-box {
            min-height: 700px;
        }

        .pagination-box {
            display: flex;
            justify-content: center;
            width: 175px;
            margin: auto;
        }
    }

    .article-box {

        .article_list-move,
        /* 对移动中的元素应用的过渡 */
        .article_list-enter-active,
        .article_list-leave-active {
            transition: all 0.5s ease;
        }

        .article_list-enter-from,
        .article_list-leave-to {
            opacity: 0;
            transform: translateX(30px);
        }

        /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
        .article_list-leave-active {
            position: absolute;
        }
    }
}</style>
